KnockoutJS তে Computed Observables একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে dependent observables বা derived values তৈরি করতে সাহায্য করে। এগুলি এমন observables যা অন্য observables এর উপর ভিত্তি করে অটোমেটিক্যালি আপডেট হয়। Computed Observables ব্যবহারের মাধ্যমে আপনি এক বা একাধিক observables এর উপর ভিত্তি করে নতুন ডেটা তৈরি করতে পারেন, এবং এই ডেটাগুলি যখনই মূল observables পরিবর্তিত হয়, স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।
Computed Observables in KnockoutJS:
KnockoutJS তে computed observables তৈরি করার জন্য ko.computed() ফাংশন ব্যবহার করা হয়। এটি ব্যবহারকারীর input বা state এর উপর নির্ভরশীল derived values তৈরি করতে সহায়তা করে, এবং এগুলি স্বয়ংক্রিয়ভাবে আপডেট হয় যখন প্রাথমিক observables পরিবর্তিত হয়।
Read-Only vs Read/Write Computed Observables:
KnockoutJS এ computed observables দুটি ভিন্নভাবে ব্যবহার করা যেতে পারে:
- Read-Only Computed Observables:
- যেখানে কেবল getter function (ডেটা রিটার্ন করার ফাংশন) ব্যবহার করা হয়। এই ধরনের computed observables এ কোনো setter function নেই।
- Read/Write Computed Observables:
- যেখানে getter এবং setter উভয়ই থাকে, অর্থাৎ আপনি ডেটা পড়তে পারেন এবং সেটও করতে পারেন।
Read/Write Computed Observables:
Read/Write computed observables হল এমন observables যেখানে আপনি ডেটার মান পড়ার পাশাপাশি সেটও করতে পারেন। এগুলি এমন ডেটা প্রদান করে যা getter এর মাধ্যমে এক্সেস করা যায় এবং setter এর মাধ্যমে আপডেট করা যায়।
How to Create Read/Write Computed Observables in KnockoutJS:
- Getter: এটি হল সেই ফাংশন যা computed observable থেকে ডেটা রিটার্ন করবে।
- Setter: এটি হল সেই ফাংশন যা computed observable এ ডেটা সেট করবে।
Example of Read/Write Computed Observable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Computed Observables - Read/Write</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Age Calculator</h2>
<p>First Name: <input data-bind="value: firstName" /></p>
<p>Last Name: <input data-bind="value: lastName" /></p>
<p>Full Name: <span data-bind="text: fullName"></span></p>
<p>Age: <input data-bind="value: age, valueUpdate: 'input'" /></p>
<p>Message: <span data-bind="text: message"></span></p>
<script>
function AppViewModel() {
this.firstName = ko.observable("John");
this.lastName = ko.observable("Doe");
this.age = ko.observable(30);
// Computed observable with both getter and setter (Read/Write)
this.fullName = ko.computed({
read: () => {
return this.firstName() + " " + this.lastName();
},
write: (newFullName) => {
var names = newFullName.split(" ");
this.firstName(names[0]);
this.lastName(names[1]);
}
});
// Another computed observable to display a message
this.message = ko.computed(() => {
return this.firstName() + " " + this.lastName() + " is " + this.age() + " years old.";
});
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- Full Name Computed Observable:
- read: এই ফাংশনটি firstName এবং lastName থেকে পূর্ণ নাম তৈরি করে।
- write: এই ফাংশনটি newFullName এ পাঠানো মানটিকে আলাদা করে firstName এবং lastName এ সেট করে।
- Message Computed Observable:
- এটি firstName, lastName, এবং age এর উপর নির্ভরশীল একটি বার্তা তৈরি করে।
- Binding:
- firstName, lastName, এবং age জন্য observables তৈরি করা হয়েছে এবং computed observables এর মাধ্যমে fullName এবং message ইউজারের ইনপুট অনুযায়ী আপডেট হবে।
Key Points About Read/Write Computed Observables:
- Getter: এটি কেবলমাত্র ডেটা রিটার্ন করে এবং UI এ পরিবর্তন দেখা যায় যখন সংশ্লিষ্ট observables পরিবর্তিত হয়।
- Setter: এটি ইউজারের ইনপুট গ্রহণ করে, এবং সেই ইনপুট অনুযায়ী মডেল বা observable ডেটার মান পরিবর্তন করতে সক্ষম।
Use Case for Read/Write Computed Observables:
- Two-way data binding: Read/Write computed observables এর মাধ্যমে আপনি ViewModel এবং View এর মধ্যে two-way binding তৈরি করতে পারেন।
- Real-time Calculation: যখন একাধিক ফিল্ডের উপর ভিত্তি করে কোনো ফলাফল বা ক্যালকুলেশন করতে হয়, তখন এটি ব্যবহার করা হয়।
- Form Input Management: যখন আপনাকে ইউজারের ইনপুটের উপর ভিত্তি করে ডেটা রিফ্রেশ বা পরিবর্তন করতে হয়, তখন এই ধরনের observables কার্যকরী।
KnockoutJS এর Read/Write Computed Observables হল একটি শক্তিশালী বৈশিষ্ট্য যা ডেটার উপর ভিত্তি করে ডাইনামিক ভাবে UI এবং ViewModel এর মধ্যে সিঙ্ক্রোনাইজেশন তৈরি করতে সহায়তা করে। Getter এবং Setter ফাংশন ব্যবহার করে আপনি একাধিক observables এর উপর ভিত্তি করে নতুন ডেটা তৈরি এবং আপডেট করতে পারেন। এটি two-way data binding এবং real-time calculations তৈরির জন্য আদর্শ। KnockoutJS এর মাধ্যমে আপনি সহজেই ডেটা এবং UI এর মধ্যে শক্তিশালী ইন্টারঅ্যাকশন তৈরি করতে পারেন।
Read more
